import { Helmet, useIntl, useModel } from '@umijs/max';
import { ConfigProvider, Radio } from 'antd';
import cls from 'classnames';
import React, { useState } from 'react';
import EventInfo from './components/EventInfo';
import StationRuntime from './components/OperatorRuning';
import RevenueRanking from './components/RevenueRanking';
import StationChargeOverview from './components/StationChargeData';
import ChargeDischargeRanking from './components/StationChargeRank';
import EfficiencyRanking from './components/StationConversionEfficiency';
import StationDailyIncome from './components/StationDailyIncome';
import MapChart from './components/StationDataMap';
import StationIncome from './components/StationIncome';
import StationOverview from './components/StationOverview';
import StationPowerOverview from './components/StationPowerOverview';
import StationType from './components/StationType';

import { useFetchStationData } from './utils/useFetchStationData';

import Styles from './index.less';

const BigData: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const {
    StationOverviewPowerData,
    StationOverviewData,
    StationEffectData,
    StationRunStateData,
    StationWarningData,
    StationAllChargeData,
    StationAllIncomeData,
    StationChargeHistoryData,
    StationHistoryAllIncomeData,
    StationTotalIncomeData,
    StationTotalNumber,
    StationTooltipData,
    StationStatusData,
    StationMonthChargeData,
    StationYearChargeData,
    StationMonthIncomeData,
    StationYearIncomeData,
  } = useFetchStationData(initialState?.stationId);

  const formattedWarningData = StationWarningData.map((data, index) => ({
    ...data,
    eventRank: <span>{index + 1}</span>,
  }));

  const [unit, setUnit] = useState('kWh');
  const [chargeDataType, setChargeDataType] = useState('date'); // 新增状态管理
  const [incomeDataType, setIncomeDataType] = useState('date'); // 新增状态管理

  // 根据查询类型选择数据源
  const getChargeData = () => {
    switch (chargeDataType) {
      case 'year':
        return StationYearChargeData;
      case 'month':
        return StationMonthChargeData;
      case 'date':
      default:
        return StationAllChargeData;
    }
  };

  const getIncomeData = () => {
    switch (incomeDataType) {
      case 'year':
        return StationYearIncomeData;
      case 'month':
        return StationMonthIncomeData;
      case 'date':
      default:
        return StationAllIncomeData;
    }
  };

  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';

  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'bigdata.title' })}</title>
      </Helmet>
      <div className={Styles.bigDataContainer}>
        <div className={Styles.bigDataLeftSide}>
          <div className={Styles.bigDataCard}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.plantRanking' })}
              </span>
            </h2>
            <StationOverview StationOverviewData={StationOverviewData} />
          </div>
          <div className={cls([Styles.bigDataCard, Styles.bigDataCardEff])}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.efficiency' })}
              </span>
              <p className={Styles.bigDataCardEx}>
                <strong></strong>
              </p>
            </h2>
            <EfficiencyRanking data={StationEffectData} />
          </div>
          <div className={cls([Styles.bigDataCard, Styles.bigDataCardTime])}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.runtimeRanking' })}
              </span>
              <p className={Styles.bigDataCardEx}>
                <strong>({intl.formatMessage({ id: 'bigdata.unitH' })})</strong>
                <span></span>
              </p>
            </h2>
            <StationRuntime stationsRuntime={StationRunStateData} />
          </div>
          <div className={Styles.bigDataCard}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.alarmList' })}
              </span>
            </h2>
            <EventInfo eventData={formattedWarningData} eventType="warning" isScrolling={true} />
          </div>
        </div>
        <div className={Styles.bigDataMain}>
          <div className={`${Styles.bigDataTitle} ${isEnglish ? Styles.bigDataTitleEn : ''}`}>
            <h1>{intl.formatMessage({ id: 'bigdata.slogan' })}</h1>
          </div>
          <div className={Styles.bigDataBox}>
            <StationPowerOverview data={StationOverviewPowerData[0]} />
          </div>
          <div className={Styles.bigDataMap}>
            {StationTooltipData && <MapChart toolTipData={StationTooltipData} />}
          </div>
          <div className={cls([Styles.rowBox, Styles.rowBoxNeg])}>
            <div className={Styles.rowFixed}>
              <div className={Styles.bigDataCard}>
                <h2 className={Styles.bigDataCardTitleWrap}>
                  <span className={Styles.bigDataCardTitle}>
                    {intl.formatMessage({ id: 'bigdata.plantType' })}
                  </span>
                </h2>
                <StationType data={StationTotalNumber} statusData={StationStatusData} />
              </div>
            </div>
            <div className={Styles.bigDataCard}>
              <h2 className={Styles.bigDataCardTitleWrap}>
                <span className={Styles.bigDataCardTitle}>
                  {intl.formatMessage({ id: 'bigdata.revenueStatistics' })}
                </span>
              </h2>
              <StationIncome data={StationTotalIncomeData} />
            </div>
          </div>
        </div>
        <div className={Styles.bigDataRightSide}>
          <div className={cls([Styles.bigDataCard, Styles.bigDataCardNeg])}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.dayCD' })}
              </span>
              <p className={Styles.bigDataCardEx}>
                <ConfigProvider
                  theme={{
                    token: {
                      // colorPrimary: 'transparent',
                      colorInfo: '#77a5f1',
                      borderRadius: 2,
                    },
                    components: {
                      Radio: {
                        buttonBg: 'transparent',
                        buttonColor: '#77A5F1',
                        buttonSolidCheckedBg: '#77A5F1',
                        buttonCheckedBg: '#77A5F1',
                        buttonSolidCheckedActiveBg: '#77A5F1',
                        buttonSolidCheckedHoverBg: '#77A5F1',
                        buttonSolidCheckedColor: '#000',
                        buttonPaddingInline: 0,
                        fontSize: 12,
                        colorBorder: 'rgba(255, 255, 255, 0)',
                        controlHeightSM: 20,
                        lineHeight: 20,
                        paddingXS: 4,
                        borderRadius: 2,
                      },
                    },
                  }}
                >
                  <Radio.Group
                    defaultValue="date"
                    buttonStyle="solid"
                    size="small"
                    onChange={(e) => setChargeDataType(e.target.value)} // 更新查询类型
                    className="global-bigdata-radio-button"
                  >
                    <Radio.Button value="date" style={{ borderRadius: '2px', marginRight: '10px' }}>
                      {intl.formatMessage({ id: 'bigdata.date' })}
                    </Radio.Button>
                    <Radio.Button
                      value="month"
                      style={{ borderRadius: '2px', marginRight: '10px' }}
                    >
                      {intl.formatMessage({ id: 'bigdata.month' })}
                    </Radio.Button>
                    <Radio.Button value="year" style={{ borderRadius: '2px' }}>
                      {intl.formatMessage({ id: 'bigdata.year' })}
                    </Radio.Button>
                  </Radio.Group>
                </ConfigProvider>
                <strong className={Styles.DataUnit}>{`(${intl.formatMessage({
                  id: 'bigdata.unitS',
                })}${unit})`}</strong>
              </p>
            </h2>
            <div className={Styles.bigDataChartBox}>
              <div className={Styles.bigDataChartBoxInner}>
                <StationChargeOverview
                  data={getChargeData()}
                  onUnitChange={setUnit}
                  dataType={chargeDataType} // 传递 dataType 参数
                />
              </div>
            </div>
          </div>
          <div className={cls([Styles.bigDataCard, Styles.bigDataCardIncome])}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.revenueStatistics' })}
              </span>
              <p className={Styles.bigDataCardEx}>
                <ConfigProvider
                  theme={{
                    token: {
                      // colorPrimary: 'transparent',
                      colorInfo: '#77a5f1',
                      borderRadius: 2,
                    },
                    components: {
                      Radio: {
                        buttonBg: 'transparent',
                        buttonColor: '#77A5F1',
                        buttonSolidCheckedBg: '#77A5F1',
                        buttonCheckedBg: '#77A5F1',
                        buttonSolidCheckedActiveBg: '#77A5F1',
                        buttonSolidCheckedHoverBg: '#77A5F1',
                        buttonSolidCheckedColor: '#000',
                        buttonPaddingInline: 0,
                        fontSize: 12,
                        colorBorder: 'rgba(255, 255, 255, 0)',
                        controlHeightSM: 20,
                        lineHeight: 20,
                        paddingXS: 4,
                        borderRadius: 2,
                      },
                    },
                  }}
                >
                  <Radio.Group
                    defaultValue="date"
                    buttonStyle="solid"
                    size="small"
                    onChange={(e) => setIncomeDataType(e.target.value)} // 更新查询类型
                    className="global-bigdata-radio-button"
                  >
                    <Radio.Button value="date" style={{ marginRight: '10px', borderRadius: '2px' }}>
                      {intl.formatMessage({ id: 'bigdata.date' })}
                    </Radio.Button>
                    <Radio.Button
                      value="month"
                      style={{ borderRadius: '2px', marginRight: '10px' }}
                    >
                      {intl.formatMessage({ id: 'bigdata.month' })}
                    </Radio.Button>
                    <Radio.Button value="year" style={{ borderRadius: '2px' }}>
                      {intl.formatMessage({ id: 'bigdata.year' })}
                    </Radio.Button>
                  </Radio.Group>
                </ConfigProvider>
                <strong className={Styles.DataUnit}>
                  ({intl.formatMessage({ id: 'bigdata.unitK' })})
                </strong>
              </p>
            </h2>
            <StationDailyIncome data={getIncomeData()} dataType={incomeDataType} />
          </div>
          <div className={cls([Styles.bigDataCard, Styles.bigDataCardCharge])}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.cdRanking' })}
              </span>
              <p className={Styles.bigDataCardEx}>
                <strong className={Styles.DataUnit}>
                  ({intl.formatMessage({ id: 'bigdata.unit' })})
                </strong>
              </p>
            </h2>
            <div className={Styles.bigDataChartBox}>
              <div className={cls([Styles.bigDataChartBoxInner, Styles.bigDataChartBoxNoTop])}>
                <ChargeDischargeRanking data={StationChargeHistoryData} />
              </div>
            </div>
          </div>
          <div className={Styles.bigDataCard}>
            <h2 className={Styles.bigDataCardTitleWrap}>
              <span className={Styles.bigDataCardTitle}>
                {intl.formatMessage({ id: 'bigdata.totalRevenue' })}
              </span>
              <p className={Styles.bigDataCardEx}>
                <strong className={Styles.DataUnit}>
                  ({intl.formatMessage({ id: 'bigdata.unitK' })})
                </strong>
              </p>
            </h2>
            <div className={Styles.bigDataChartBox}>
              <div className={cls([Styles.bigDataChartBoxInner, Styles.bigDataChartBoxNoTop])}>
                <RevenueRanking data={StationHistoryAllIncomeData} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default BigData;
